<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('ECharts')" />
</head>
<body >
	
    <div class=" ">
            <div >
                        <div class="echarts" id="echarts-line-chart" style="width: 100%; height: 550px;"></div>
            </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: echarts-js" />
    <script th:inline="javascript">
	    $(function () {
	    	var tagConfig = [[${tagConfig}]];
	    	var xdata =[[${xList}]];
	       // xdata = JSON.parse(xdata);
	    	var ydata =[[${list}]];
	    	var limitList = [[${limitList}]];
	    	console.log(limitList);
	        var lineChart = echarts.init(document.getElementById("echarts-line-chart"),'dark');
	        // 指定图表的配置项和数据
	        var option = {
	       		    title: {
	       		        text: tagConfig
	       		    },
	        		
	        		    tooltip: {
	        		        trigger: 'axis'
	        		    },
	        		   legend: {
	        		        data: ['测点值','上限值','下线值']
	        		    },
	        		   
	        		    grid: {
	        		        containLabel: true
	        		    },
	        		    xAxis: {
	        		        type: 'category',
	        		        data:xdata
	        		       
	        		        	},
	        		    yAxis: {
	        		    	 type: 'value',
	        		          
	        		          axisLine: {
	        		            lineStyle: {
	        		              color: '#fff'
	        		            }
	        		          },
	        		          axisLabel: {
	        		            textStyle: {
	        		              color: '#ffff'
	        		            }
	        		          }
	        		    },
	        		    series: [
	        		        {
	        		            name: '测点值',
	        		            type: 'line',
	        		            smooth: true,
	        		            data: ydata
	        		             ,
	        		            markLine: {
	        		                 itemStyle: {
	        		                      normal: {
	        		                          borderWidth: 1,
	        		                          lineStyle: {
	        		                            //  type: 'solid',
	        		                              color: '#FFFF00 ',
	        		                              width: 2,
	        		                          }
	        		                          
	        		                      },


	        		                  },
	        		                data: limitList
	        		            } 
	        		        }
	        		        
	        		    ],
	        		    
	          
	        };
	        lineChart.setOption(option);
	        $(window).resize(lineChart.resize);
	
	       
	
	    });
    </script>
</body>
</html>